<template>
	<div class='achievement'>
		<!-- 上传分享 -->
		<div class="title">我的改造成果</div>
		<Button
			class="choose-file"
			width="300"
			height="300"
			bgColor="#FBFBFB"
			color="#00C9A9"
			border="3px solid #00C9A9"
			@click="$emit('uploadAchievement')"
		>
			<div v-if="!myAchievement">
				<Iconfont
					name="icon-a-Group2"
					size="50"
					color="#00C9A9"
				/>
				<div style="margin-top: 21px;">上传分享</div>
			</div>
			<img
				v-else
				:src="myAchievement.url"
			>
		</Button>
		<!-- 其他人成果 -->
		<div
			style="margin-top: 40px;"
			class="title"
		>
			其他人成果
		</div>
		<div class="works">
			<Works :course="course" />
		</div>
	</div>
</template>

<script>
import Works from '../../components/Works'

export default {
  props: {
    course: Object,
    myAchievement: {
      type: Object,
      default: null
    }
  },
  components: {
    Works
  },
}
</script>

<style lang='scss' scoped>
.achievement {
  width: 100%;

  .title {
    margin-bottom: 20px;
    color: $color2;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: $rSmall;
  }
}
</style>
